<template>
  <!-- <div>测试图标
    <div id="c1"></div>
  </div> -->
  <div>
    <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
      <Checkbox label="show">Show</Checkbox>
      <Checkbox label="weak">Weak</Checkbox>
      <Checkbox label="signin">Signin</Checkbox>
      <Checkbox label="click">Click</Checkbox>
      <Checkbox label="active">Active</Checkbox>
      <Checkbox label="day7">7, retained</Checkbox>
      <Checkbox label="day30">30, retained</Checkbox>
      <Checkbox label="tomorrow">The next day left</Checkbox>
      <Checkbox label="day">Day Active</Checkbox>
      <Checkbox label="week">Week Active</Checkbox>
      <Checkbox label="month">Month Active</Checkbox>
    </Checkbox-group>
    <Table :data="tableData2" :columns="tableColumns2" border ></Table>
  </div>
  <!-- 穿梭 -->
  <!-- <div>
    <Transfer
        :data="data4"
        :target-keys="targetKeys4"
        :render-format="render4"
        @on-change="handleChange4">
    </Transfer>
  </div> -->
  <!-- <div>
    <personSelected  @handleSubmit1="handleSubmit" @cancel="cancel"  @ab="ab"></personSelected>
  </div> -->
</template>

<script>
// import { Chart } from '@antv/g2'
// import personSelected from '../newDevices/components/personSelected'
export default {
  data () {
    return {
      data1: [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 },
      ],
      tableData2: this.mockTableData2(),
      tableColumns2: [],
      tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month'],
      // //穿梭
      // data4: this.getMockData(),
      // targetKeys4: this.getTargetKeys()
    }
  },
  // components: {
  //   personSelected
  // },
  methods: {
    // drawImg(){
    //   let chart = new Chart({
    //     container: 'c1',
    //     width: 600,
    //     height: 300,
    //   })
    //   // Step 2: 载入数据源
    //   chart.data(this.data1)
    //   // Step 3：创建图形语法，绘制柱状图
    //   chart.interval().position('genre*sold')
    //   // Step 4: 渲染图表
    //   chart.render()
    // },
    mockTableData2 () {
      let data = [];
      function getNum() {
          return Math.floor(Math.random () * 10000 + 1);
      }
      for (let i = 0; i < 20; i++) {
          data.push({
              name: 'Name ' + (i+1),
              fav: 0,
              show: getNum(),
              weak: getNum(),
              signin: getNum(),
              click: getNum(),
              active: getNum(),
              day7: getNum(),
              day30: getNum(),
              tomorrow: getNum(),
              day: getNum(),
              week: getNum(),
              month: getNum()
          })
      }
      return data;
    },
    getTable2Columns () {
      const table2ColumnList = {
          name: {
              title: 'Name',
              key: 'name',
              fixed: 'left',
              width: 200,
              render: (h, params) => {
                console.log('123',this.tableData2[params.index])
                  const fav = this.tableData2[params.index].fav;
                  const style = fav === 0 ? {
                      cursor: 'pointer',
                      // overflowY: 'scroll'
                  } : {
                      cursor: 'pointer',
                      color: '#f50',
                      // overflowY: 'scroll'
                  };

                  return h('div', [
                      h('Icon', {
                          style: style,
                          props: {
                              type: fav === 0 ? 'ios-star-outline' : 'ios-star'
                          },
                          nativeOn: {
                              click: () => {
                                  this.toggleFav(params.index);
                              }
                          }
                      }),
                      h('span', ' ' + params.row.name)
                  ]);
              }
          },
          show: {
              title: 'Show',
              key: 'show',
              width: 150,
              sortable: true
          },
          weak: {
              title: 'Weak',
              key: 'weak',
              width: 150,
              sortable: true
          },
          signin: {
              title: 'Signin',
              key: 'signin',
              width: 150,
              sortable: true
          },
          click: {
              title: 'Click',
              key: 'click',
              width: 150,
              sortable: true
          },
          active: {
              title: 'Active',
              key: 'active',
              width: 150,
              sortable: true
          },
          day7: {
              title: '7, retained',
              key: 'day7',
              width: 150,
              sortable: true
          },
          day30: {
              title: '30, retained',
              key: 'day30',
              width: 150,
              sortable: true
          },
          tomorrow: {
              title: 'The next day left',
              key: 'tomorrow',
              width: 150,
              sortable: true
          },
          day: {
              title: 'Day Active',
              key: 'day',
              width: 150,
              sortable: true
          },
          week: {
              title: 'Week Active',
              key: 'week',
              width: 150,
              sortable: true
          },
          month: {
              title: 'Month Active',
              key: 'month',
              width: 150,
              sortable: true
          }
      };
      let data = [table2ColumnList.name];
      this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
      return data;
    },
    changeTableColumns () {
      this.tableColumns2 = this.getTable2Columns();
    },
    toggleFav (index) {
      this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
      // console.log(this.tableData2[index].fav)
    },
    //穿梭
    getMockData () {
        let mockData = [];
        for (let i = 1; i <= 200; i++) {
            mockData.push({
                key: i.toString(),
                label: 'Content ' + i,
                description: 'The desc of content  ' + i,
                disabled: Math.random() * 3 < 1
            });
        }
        return mockData;
    },
    getTargetKeys () {
        return this.getMockData()
                .filter(() => Math.random() * 2 > 1)
                .map(item => item.key);
    },
    handleChange4 (newTargetKeys) {
        this.targetKeys4 = newTargetKeys;
    },
    render4 (item) {
        return item.label + ' - ' + item.description;
    },
    handleSubmit(data){
      console.log('handleSubmit',data)
    },
    cancel(){
      console.log('cancel')
    },
    ab(){
      console.log('ab')
    },
  },
  mounted () {
    // this.drawImg()
    this.changeTableColumns();
  },
  
}
</script>

<style lang="less" scoped>
.list-area {
  overflow: hidden;

  /deep/ .img-area {
    width: 100px;
    height: 100px;
    margin: 6px 0;
    box-sizing: content-box;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
.glo-search-area {
  .date-filter {
    .date-widget {
      width: 210px;
    }
  }
}
</style>
